<style lang="scss" scoped>

</style>
<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px">
        <el-form-item label="角色id">
          <el-input size="mini" class="ui-item-reset" v-model="params.roleId" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input size="mini" class="ui-item-reset" v-model="params.name" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <!-- <el-button size="mini">重置</el-button> -->
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>角色列表</div>
        <div>
<!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
          <el-button type="primary" size="mini" @click="open">新增</el-button>
        </div>
      </div>
      <el-table v-loading="tabLoading" :data="dataList" @selection-change="handleSelectionChange"
                :cell-style="cellStyle" :header-cell-style="rowClass">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="roleId" label="角色id"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="description" label="说明"></el-table-column>

        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <add-item v-bind:roleItem.sync='roleItem' @submit="addItem" ref="addPerm"></add-item>
    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  import addItem from '@/components/role/addItem.vue'

  export default {
    name: 'roleList',
    components: {
      pageBox, addItem
    },
    data() {
      return {
        dataList: [],
        exportList: [],
        test: '1',
        roleItem: {
          name:'',
          description:''
        },
        tabLoading: false,
        params: {}
      }
    },
    created() {
      this.getData()
      let cooks = document.cookie.split(';')
      console.log('进入了roleList', cooks)
    },
    methods: {
      getData() {
        // this.tabLoading=true
        post('/pms_api/role/list', this.params).then(res => {
          this.dataList = res.data
          this.tabLoading = false
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      // http://192.168.199.178:8080/#/login
      addItem() {
        post('/pms_api/role/add', this.roleItem).then(res => {
          this.$refs.addPerm.addDialogVisible = false;
          this.getData();
        }).catch(err => {
          console.log(err)
        })
      },
      open() {
        // this.addDialogVisible=!this.addDialogVisible
        this.$refs.addPerm.openWindow('新增角色')
      },
      checkDetail(item) {
        this.$router.push({
          path: '/roleDetail',
          query: {
            title: item.name,
            id: item.roleId
          }
        })
      },
      deleteItem(item) {
        post('/pms_api/role/delete', {'roleId': item.roleId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
        })
      },
      handleSelectionChange(val) {
        this.exportList = val
      },
      exportExcel() {
        // 暂时无法完成 xlsx
        this.$message.warning(`抱歉，无法导出`)
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>


